import { useState, useEffect } from 'react';
import CommonLoading from '@/components/CommonLoading';
import { useLocation } from 'react-router-dom';
import { getSearchParamsObj } from '@/utils/utils.jsx';
import { getBannerDetail } from './service';
import styles from './index.module.less';

const ArticleContent = () => {
  const [loading, setLoading] = useState(false);
  const [detailsObj, setDetail] = useState({});

  const location = useLocation();

  // 判断跳转l来源
  useEffect(() => {
    if (location.pathname == '/blank/articleContent') {
      const queryObj = getSearchParamsObj(location.search);
      if (Object.keys(queryObj).length) {
        getDetailDataFunc(queryObj.id);
      }
    }
  }, [location]);

  const getDetailDataFunc = async (query) => {
    setLoading(true);
    const { data, success } = await getBannerDetail({ id: query });
    if (success) {
      setDetail(data || {});
    }
    setLoading(false);
  };

  const { title, createTime, content } = detailsObj;

  return (
    <>
      <br />
      <h3 className={styles.artivleTitle}>{title}</h3>
      <p className={styles.createTime}>{createTime}</p>
      <div
        className={`${styles.articleContent} ${styles.editContent}`}
        dangerouslySetInnerHTML={{
          __html: content?.replace(
            /\s{3}/g,
            '<span style="display:inline-block;width:18px"></span>'
          ),
        }}
      ></div>
      <CommonLoading loading={loading} />
    </>
  );
};

export default ArticleContent;
